<template>
  <div class="footer">
    <div class="friend_link">
      <div id="friendLink" class="box_center cf">
        <span class="link-title">友情链接：</span>
        <a
            v-for="(item, index) in friendLinks"
            :key="index"
            :href="item.linkUrl"
            class="friend-link"
            target="_blank"
        >{{ item.linkName }}
        </a>
      </div>
    </div>
    <div class="copyright">
      <p>Copyright (C) www.satan.com All rights reserved&nbsp;&nbsp;小说精品屋版权所有</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {listHomeFriendLinks} from "@/api/home";

interface FriendLink {
  linkName: string;
  linkUrl: string;
}

const state = reactive({
  friendLinks: [] as FriendLink[]
});
const {friendLinks} = toRefs(state)
onMounted(async () => {
  const {data} = await listHomeFriendLinks();
  state.friendLinks = data;
});
</script>

<style lang="scss" scoped>
.footer {
  clear: both;
  background-color: #409EFF;
  padding: 5px 0;
  text-align: center;

  .friend_link {
    font-size: 12px;
    margin-bottom: 6px;

    .box_center {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .link-title {
        margin-right: 10px;
        color: #fff;
      }

      .friend-link {
        margin: 0 10px;
        color: #fff;
        text-decoration: none;

        &:hover {
          color: red;
        }
      }
    }
  }

  .copyright {
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
  }
}
</style>